<template>
	<div class="my">
		<nav-tab activeColor="#CF0000">
			<header-item>
				<div class="header-nav1" slot="header-img" @click="loginbtn">

					<div>安全退出</div>
				</div>
				<div class="header-nav2" slot="header-sc" @click="search">
					<img src="@/assets/image/header/sc.png" />
					<input type="text" class="input" placeholder="理财有风险,投资须谨慎" />
				</div>
				<div class="header-nav3" slot="header-xingx" @click="news">
					<img src="@/assets/image/header/xf.png">
					<div>消息</div>
				</div>
			</header-item>
		</nav-tab>
		<div class="mybox">
			<div class="mybox-user">
				<img src="../../assets/image/header/ew.png" />
				<div class="mybox-user-title">
					<div>尊敬的客人，您好</div><span>欢迎您,晚上好</span>
				</div>
			</div>
			<div class="mybox-zi" @click="setup">设置</div>
		</div>

		<div class="kabox">
			<div class="kaboxitem">
				<img src="@/assets/image/my/yhk.png" />
				<span>银行卡</span>
			</div>
			<div class="kaboxitem">
				<img src="@/assets/image/my/yhk.png" />
				<span>日历</span>
			</div>
			<div class="kaboxitem">
				<img src="@/assets/image/my/yhk.png" />
				<span>票卷</span>
			</div>
		</div>
		<!-- 账户总览 -->
		<hezi>
			<hezi-item>
				<div slots="title" class="zonglan-title" slot="title">账户总览</div>
				<div class="zonglanbox" slot="neirong">
					<div class="qian">总资产<span>￥10000000.00</span></div>
					<div class="shouy">昨天收益<span>￥0.00</span></div>
					<div class="jianyu">
						<div class="xian"></div>
						<div class="kode"> 谈钱很俗,但我就想帮你多赚点</div>
						<div class="xian"></div>
					</div>
				</div>
			</hezi-item>
		</hezi>

		<div class="dongtai">
			<div class="iconkode">
				<div class="iconkode-icon"></div>
			</div>
			<div class="titlecode">第三期行家动态：轻仓静待抄底时机。</div>
			<div class="jiantou">
				<van-icon name="arrow" size="22px" color="#CCCCCC" />
			</div>
		</div>
		<!-- 收支记录 -->
		<hezi>
			<hezi-item>
				<div slots="title" class="zonglan-title" slot="title">收支记录</div>
				<div class="zonglanbox" slot="neirong">
					<div class="code">
						<div class="codetop">
							<div class="codetop-title">本月收入</div>
							<div class="codetopRight">
								<div class="jiege">￥10000.00</div>
								<van-progress pivot-text="" color="#82D5F9" :percentage="25" stroke-width="7px" />
							</div>
						</div>
						<div class="codetop">
							<div class="codetop-title">本月支出</div>
							<div class="codetopRight">
								<div class="jiege">￥30000.00</div>
								<van-progress pivot-text="" color="#FF7F7A" :percentage="25" stroke-width="7px" />
							</div>
						</div>
					
					</div>
					<div class="jianyu">
						<div class="xian"></div>
						<div class="kode"> 活期余额 ￥10,000,000.00</div>
						<div class="xian"></div>
					</div>
				</div>
			</hezi-item>
		</hezi>
		<!-- 个人消费信用卡 -->
		<hezi>
			<hezi-item>
				<div slots="title" class="zonglan-title" slot="title">账户总览</div>
				<div class="zonglanbox" slot="neirong">
					<div class="shengyu">剩余应还<span>￥0.00</span></div>
					<div class="jianyu2">
						<div class="xian">还款日<span>05-07</span></div>
						<div class="xian">当前可用额度<span>99,225.66</span></div>
					</div>
				</div>
			</hezi-item>
		</hezi>
		<div class="desCell">
			<van-cell title="我的贷款" is-link />
			<van-cell title="我的网点" is-link />
			<van-cell title="发现活动" is-link />

		</div>
		<!-- 底部导航 -->
		<main-tab-item></main-tab-item>
	</div>
</template>

<script>
	import {
		Swipe,
		SwipeItem,
		Cell,
		Icon,
		Progress
	} from 'vant';
	import NavTab from '@/components/navtar/Header.vue'
	import HeaderItem from '@/components/navtar/HeaderItem.vue'
	import Hezi from '@/components/hezi/Hezi.vue'
	import HeziItem from '@/components/hezi/HeziItem.vue'
	import MainTabItem from '@/components/MainTabItem.vue'
	export default {
		name: 'Home',
		components: {
			[Swipe.name]: Swipe,
			[SwipeItem.name]: SwipeItem,
			[Cell.name]: Cell,
			[Icon.name]: Icon,
			[Progress.name]: Progress,
			NavTab,
			HeaderItem,
			Hezi,
			HeziItem,
			MainTabItem,
			
		},
		methods:{
			news(){
				this.$router.push('/news')
			},
			loginbtn(){
				this.$router.push('/login')
			},
			setup(){
				this.$router.push('/setup')
			},
			search(){
				this.$router.push('/search')
			}
		},
	}
</script>
<style lang="less" scoped>
	@pt: 19px;

	.my {
		padding-bottom: 60px;
		background-color: #F0F0F2;
	}

	.my-swipe .van-swipe-item {
		color: #fff;
		font-size: 10px;
		line-height:75px;
		text-align: center;
		background-color: #39a9ed;
	}

	.mybox {
		margin-top: 45px;
		height:88px;
		background-color: #CF0000;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 16px;
		color: #FFFFFF;

		.mybox-user {
			flex: 6;
			padding: 0 13px;
			box-sizing: border-box;

			img {
				width: 45px;
				height: 45px;
				border-radius: 50%;
				border: 1px solid;
				float: left;

			}

			.mybox-user-title {
				margin-left: 55px;

				span {
					font-size: 6px;
					display: block;
					margin-top: 3px;
				}
			}
		}

		.mybox-zi {
			flex: 1;
		}
	}

	.kabox {
		height: 44px;
		background-color: white;
		display: flex;

		.kaboxitem {
			flex: 1;
			// border: 1px solid;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			img {
				width: 30px;
				height: 30px;
				padding-right: 5px;
			}

			span {
				font-size: 12px;
				color: #AAAAAA;
			}


		}

		.kaboxitem:nth-child(2)::before {
			content: "";
			width: 1px;
			height: 18px;
			background-color: #E4E4E4;
			position: absolute;
			right: 0px;
		}

		.kaboxitem:nth-child(2)::after {
			content: "";
			width: 1px;
			height: 18px;
			background-color: #E4E4E4;
			position: absolute;
			left: 0px;
		}

	}

	.dongtai {
		height: 45px;
		background-color: white;
		margin-top: @pt;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.iconkode {
			flex: 1;
			text-align: center;

			.iconkode-icon {
				width: 10px;
				height: 10px;
				border-radius: 10px;
				background-color: #FC4C5B;
				margin: 0 auto;
			}
		}

		.titlecode {
			flex: 6;
			font-size: 14px;
			color: #686868;
		}

		.jiantou {
			flex: 1;
		}
	}
	.code {
		margin-top: -10px;
		.codetop {
			display: flex;
            align-items: center;
			.codetop-title {
				font-size: 14px;
				color: #959595;
			}
			.codetopRight {
				font-size: 16px;
				color: #383838;
				margin-left: 10px;
				margin-bottom: 5px;

				.jiege {
					margin-bottom: 5px;
				}

			}
		}
	}

	.progress {
		width: 180px;
		margin-top: 6px;
		margin-left: 170px;
	}

	// 剩余
	.shengyu {
		font-size: 16px;
		color: #959595;
		margin-top: 25px;

		span {
			font-size: 24px;
			color: #FC4C5B;
			padding-left: 15px;
		}
	}

	.jianyu2 {
		display: flex;
		justify-content: space-between;
         
		.xian {
			font-size: 12px;
			color: #959595;
			flex: 1;
			span {
				// margin-left: 5px;
			}
		}
	}

	.desCell {
		background-color: #FFFFFF;
		margin-top: @pt;

		.van-cell {
			height: 45px;
			font-size: 16px;
			line-height: 40px;
			padding: 5px 13px;
			box-sizing: border-box;
		}

		.van-icon {
			font-size: 20px;
			margin-top: 10px;
		}
	}
</style>
